<template>
	<view class="row">
		<view class="col mb30" v-for="(item,index) in data" :key="index" @click="toDetail(item)">
			<squareBox :ratio='1'>
				<image :src="item.imgFull" mode="aspectFit" class="w100 h100 mainPic"></image>
			</squareBox>
			<view class="name mt10">{{item.name}}</view>
		</view>
		<view  v-if="!data.length" class="w100">
			<u-empty mode="car" text="暂无数据">
			</u-empty>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		data: {
			type: Array,
			default: () => []
		}
	})
	const toDetail = (item) => {
		console.log(item,'itemmm')
		uni.navigateTo({
			url: `/pages/class/goodsDetail?id=${item.id || item.gid}`
		})
	}
</script>

<style lang="scss">
.row {
	@include row(30rpx);
	.col {
		@include col(12,30rpx);
		.mainPic {
			border-radius: 16rpx;
		}
		.name {
			text-align: center;
			@include textOverflow();
			color: #333;
			font-size: 26rpx;
		}
	}
}
</style>